<script >
export default {
    props: {
        data: {
            type: Object,
        },
        chooseIndex: {
            type: Number,
        }
    },
    data() {
        return {
            list: [],
        }
    },
    watch: {
        chooseIndex(newVal) {
            if (newVal == 1) {
                this.list = this.data.saleRank;
            } else if (newVal == 2) {
                this.list = this.data.visitRank;
            }
            console.log(this.list)
        },
        data(newVal) {
            if (this.chooseIndex == 1) {
                this.list = newVal.saleRank;
            } else if (this.chooseIndex == 2) {
                this.list = newVal.visitRank;
            }
        }
    },
  
}
</script>
<template>
    <div>
        <h3>排行榜</h3>
        <div v-for="item in list" :key="item.no" class="item">
            <span :class= "{'top-3': item.no <= 3}">{{ item.no }}</span>
            <span>{{ item.title }}</span>
            <span>{{ item.sales }}</span>
        </div>
    </div>
</template> 
<style lang="scss" scoped>
.item {
    width: 400px;
    margin: 18px 0;
    display: flex;
    gap: 20px;
    font-size: 14px !important;

    span:first-child {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
    }
    span:nth-child(2) {
        flex: 1;
    }
    span:last-child {
        width: 50px;
        text-align: right;
    }    
}

.top-3 {
    background-color: #09b3f7;
    color: #fff;
}
</style>
